<script setup lang="ts">
import Content from '@/components/Content/index.vue'
import ContentTitle from '@/components/ContentTitle/index.vue'
import SelfPagination from '@/components/SelfPagination/index.vue'
import APIMessage from '@/api/message'
import DialogMessage from '@/components/DialogMessage/index.vue'
import type { MessageType } from '@/api/message/types'
import { ElMessage, ElMessageBox } from 'element-plus'
import DialogReport from '@/components/DialogReport/index.vue'
const list = ref([])

const type = shallowRef<MessageType>('chatMessage')


const loading = shallowRef<boolean>(false)

const queryParams = ref<PageQuery>({
    page: 1,
    limit: 8
})

const total = shallowRef<number>(0)

function getList() {
    loading.value = true
    APIMessage.getList(queryParams.value, type.value).then(({ data, total: count }) => {
        list.value = data
        total.value = count
    }).finally(() => {
        loading.value = false
    })
} getList()

watch(type, () => {
    queryParams.value = { page: 1, limit: 8 }
    getList()
})

const dialogVisible = shallowRef<boolean>(false)

const shopInfo = ref<any>({})

function handleShowDialogMessage(row: any) {
    shopInfo.value = {
        shop_id: row.shop_id,
        user_id: row.user_id,
        user: {
            head_img: row.head_img,
            username: row.username
        }
    }
    dialogVisible.value = true
}
function handleDelete(row: any) {
    ElMessageBox.confirm(
        '是否删除该条数据？',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        const formData = {
            id: row.id,
            type: type.value
        }
        return APIMessage.delMassage(formData)
    }).then(() => {
        ElMessage.success('删除成功')
        getList()
    }).catch(() => {
        ElMessage.info('已取消')
    })
}

const message_id = shallowRef<any>()

const dialogReportVisible = shallowRef<boolean>(false)

function handleShowDialogReport(row: any) {
    message_id.value = row.id
    dialogReportVisible.value = true
}

</script>

<template>
    <div class="message">
        <Content class="content">
            <ContentTitle title="消息中心" />
            <el-tabs v-model="type" class="tabs">
                <el-tab-pane label="私信" name="chatMessage"></el-tab-pane>
                <el-tab-pane label="系统通知" name="massage"></el-tab-pane>
                <el-tab-pane label="举报" name="report"></el-tab-pane>
                <el-tab-pane label="反馈" name="feekback"></el-tab-pane>
                <el-tab-pane label="入职公司申请" name="apply"></el-tab-pane>
            </el-tabs>
            <el-table class="list" :data="list" :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
                v-loading="loading">
                <el-table-column label="标题 | 内容" v-slot="{ row }">
                    <div class="list-content">
                        <p>{{ row?.title }}</p>
                        <p>{{ row?.content }}</p>
                    </div>
                </el-table-column>
                <el-table-column prop="create_time" label="时间" width="180" />
                <el-table-column label="操作" align="center" width="180">
                    <template #default="{ row }">
                        <el-button class="btn" type="primary" link @click="handleShowDialogMessage(row)"
                            v-if="type == 'chatMessage'">回复</el-button>
                        <el-button class="btn" type="primary" link
                            v-if="type == 'report' && row.report_type == 'tort' && row.is_tort == 1">已申诉</el-button>
                        <el-button class="btn" type="primary" link
                            v-else-if="type == 'report' && row.report_type == 'tort' && row.is_tort != 1"
                            @click="handleShowDialogReport(row)">申诉</el-button>
                        <el-button class="btn" type="info" link @click="handleDelete(row)"
                            v-if="type != 'chatMessage'">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <SelfPagination style="margin-top: 50px;" :total="total" v-model:current-page="queryParams.page"
                :page-size="queryParams.limit" @get-list="getList" />
        </Content>
        <DialogMessage v-model="dialogVisible" :shopInfo="shopInfo" />
        <DialogReport v-model="dialogReportVisible" :message_id="message_id" @on-submit="getList" />
    </div>
</template>

<style lang="scss">
.message {
    .list {
        .el-table__row {
            font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
        }

        .cell {
            font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
        }

        .btn {
            font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
        }
    }
}
</style>

<style lang="scss" scoped>
.message {
    width: 99%;
    margin: 0 auto;

    .content {
        margin-bottom: 30px;

        .list {
            width: 99.99%;
            margin: 0 auto;

            .list-content {
                p {
                    &:nth-child(1) {
                        color: rgba(56, 148, 255, 1);
                        font-size: 14px;
                    }
                }
            }
        }
    }

    .tabs {
        margin-top: 10px;

        &:deep(.el-tabs__item.is-active) {
            color: #F91414;
        }

        &:deep(.el-tabs__active-bar) {
            background-color: #F91414;
            height: 1px;
        }

        &:deep(.el-tabs__item) {
            &:hover {
                color: #F91414;
            }
        }

        &:deep(.el-tabs__nav-wrap) {
            &:after {
                height: 1px !important;
            }
        }
    }
}
</style>
